<template>
  <view class="regular">
    <view class="main1">
      <view class="text1">
        <text class="text">{{ datas.txtx1 }}</text>
        <view class="text1">
          <view class="time">
            <view
              :class="datas.code == index ? 'select' : ''"
              v-for="(item, index) in datas.txtx2"
              :key="index"
              @click="cut(index)"
            >
              {{ item.txt1 }}
              <view></view>
            </view>
          </view>

          <view
            class="particulars"
            v-for="(item, index) in regularSifts"
            :key="index"
			 @click="goto(item.regularProductId,item.regularProductName)"
          >
            <view class="particulars1">
              <view>
                <view class="red">{{ item.regularProductChgYear }}%</view>
                <view>最高年化收益率</view>
              </view>
              <view>
                <view class="black">{{ item.regularProductName }}</view>
                <view>{{ item.regularProductLightspot }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="image">
      <view class="text1">兴证资管金麒麟1年定期</view>
      <view class="text2">
        <text class="t">历史年化率收益</text>
        <text>69.05%</text>
      </view>
    </view>
    <view class="main1">
      <view class="text1">
        <text class="text">{{ list.txt1 }}</text>
        <view class="text1">
          <view class="particulars">
            <view
              class="particulars1"
              v-for="(item, index) in regularSiftWinnow"
              :key="index"
              @click="goto(item.regularProductId,item.regularProductName)"
            >
              <view>
                <view class="red">{{ item.regularProductChgYear }} </view>
                <view>历史年化收益率</view>
              </view>

              <view>
                <view class="black">{{ item.regularProductName }}</view>
                <view>{{ item.regularProductLightspot }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers("licai");
export default {
  data() {
    return {
      list: {
        txt1: "进阶精选",
        txt2: [
          {
            txt1: "6.52%",
            txt2: "历史年化收益率",
            txt3: "浙江汇金增强1个月",
            txt4: "低风险5万起投",
          },
          {
            txt1: "16.06%",
            txt2: "历史年化收益率",
            txt3: "天富智投稳健组合",
            txt4: "中低风险1000元起购",
          },
          {
            txt1: "48.32%",
            txt2: "最高7日年化收益率",
            txt3: "国泰君安君得鑫2年",
            txt4: "1000元起投 业绩报酬计提基...",
          },
          {
            txt1: "5.91%",
            txt2: "成立以来年化净值增长",
            txt3: "国华节节高A款",
            txt4: "配置稳健1000元起购",
          },
        ],
      },
      datas: {
        code: 0,
        txtx1: "精选优选",
        txtx2: [
          {
            txt1: "1个月",
          },
          {
            txt1: "1-6个月",
          },
          {
            txt1: "6个月以上",
          },
        ],
      },
    };
  },
  watch: {},
  onLoad() {
    this.getregularSifts({
      month: "1",
    }),
      this.getregularSiftWinnows();
  },
  computed: {
    ...mapState(["regularSifts", "regularSiftWinnow"]),
  },
  methods: {
    ...mapActions(["getregularSifts", "getregularSiftWinnows"]),
    goto(rid,rname) {
      console.log(rid,rname);
      uni.navigateTo({
        url: "/pages/hutubiao/hutubiao?id=" + rid + "&name=" + rname,
      });
    },
    cut(index) {
      this.datas.code = index;
      if (index == 0) {
        this.getregularSifts({
          month: "1",
        });
      } else if (index == 1) {
        this.getregularSifts({
          month: "6",
        });
      } else if (index == 2) {
        this.getregularSifts({
          month: "12",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.regular {
  background-color: #fafafa;

  .main1 {
    padding: 40rpx 0 0 24rpx;
    margin-bottom: 24rpx;

    .text1 {
      padding-right: 24rpx;

      .text {
        font-size: 36rpx;
        color: #333333;
      }

      .text1 {
        margin-top: 24rpx;
        background-color: rgb(255, 255, 255);
        border-radius: 20rpx;
        padding-left: 24rpx;

        .time {
          display: flex;
          justify-content: space-between;
          padding-top: 30rpx;

          view {
            font-size: 24rpx;
            color: #999999;
          }

          .select {
            font-size: 32rpx;
            color: #015dfb;
            display: flex;
            flex-direction: column;
            align-items: center;

            view {
              border-bottom: 6rpx solid #015dfb;
              width: 62rpx;
            }
          }
        }
      }
    }

    .particulars {
      font-size: 24rpx;
      color: #cdcdcd;
      padding-left: 24rpx;
      padding-top: 36rpx;

      > view {
        display: flex;
        align-items: flex-end;
        padding-bottom: 30rpx;
      }

      .particulars1 {
        .red {
          color: #ff4658;
          font-size: 40rpx;
          width: 328rpx;
          margin-bottom: 4prx;
        }

        .black {
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 6rpx;
        }
      }
    }
  }

  .image {
    width: 702rpx;
    height: 174rpx;
    background: url("../../../static/iamges/dingqihuangjin/dinqibanner.png")
      center;
    margin-left: 24rpx;
    padding: 30rpx 0 0 30rpx;

    .text1 {
      font-size: 36rpx;
      color: rgb(255, 255, 255);
    }

    .text2 {
      padding-top: 4rpx;
      font-size: 26rpx;
      color: rgb(255, 255, 255);

      .t {
        color: rgb(151, 149, 149);
      }
    }
  }
}
</style>
